<template>
  <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPieDouble',
  props: {
    value: Array,
    text: String,
    subtext: String,
    color:String
  },
  methods:{
    showPie(){
     this.$nextTick(() => {
       var get=function(e){
　　　　 var newStr=" ";
        var start,end;
 　　　　var name_len=e.name.length;    　　　　　　　　　　　　   //每个内容名称的长度
 　　　　var max_name=4;    　　　　　　　　　　　　　　　　　　//每行最多显示的字数
 　　　　var new_row = Math.ceil(name_len / max_name); 　　　　// 最多能显示几行，向上取整比如2.1就是3行
 　　　　if(name_len>max_name){ 　　　　　　　　　　　　　　  //如果长度大于每行最多显示的字数
  　　　　　　for(var i=0;i<new_row;i++){ 　　　　　　　　　　　   //循环次数就是行数
   　　　　　　　　var old='';    　　　　　　　　　　　　　　　　    //每次截取的字符
   　　　　　　　　start=i*max_name;    　　　　　　　　　　     //截取的起点
  　　　　　　　　 end=start+max_name;    　　　　　　　　　  //截取的终点
   　　　　　　　　if(i==new_row-1){    　　　　　　　　　　　　   //最后一行就不换行了
    　　　　　　　　　　old=e.name.substring(start);
   　　　　　　　　}else{
    　　　　　　　　　　old=e.name.substring(start,end)+"\n";    
  　　　　　　　　 }
   　　　　　　　　　　 newStr+=old; //拼接字符串
 　　　　　　  }
　　　   }else{                                          //如果小于每行最多显示的字数就返回原来的字符串
  　　　　　　newStr=e.name; 
 　　　  }
 　　　 return newStr;
　　};
      let legend = this.value.map(_ => _.name);
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          position:'bottom',
          data: legend
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.value,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
             label: {
               normal:{
                 　position:"outer",　　　　　
                   formatter:get,
                   textStyle:{       //这只是为了让文字居中而已
                　　align:"right",            //水平对齐方式可选left，right，center
                　　baseline:"top",　　　　//垂直对齐方式可选top，bottom，middle
                  },
                  color:this.color
               }
             },
             labelLine:{  
                normal:{  
                      length:5,  // 改变标示线的长度
                      // lineStyle: {
                      //   color: "red"  // 改变标示线的颜色
                      // }
                },
            },
          }
        ],
      color:[  "#F3B83C","#FF576E","#3DF1B2","#47A1FF","#9A66E4","#ed3f14","#1C86F1","#6633FF"],
      }
      let dom = echarts.init(this.$refs.dom, 'tdTheme')   
      dom.setOption(option)
    });
    }
 
  },
  mounted () {
   this.showPie();
  },
  watch: {
  //观察option的变化
  value: {
   handler(newVal, oldVal) {
    //  console.log(newVal);
    //  console.log('newVal'+newVal,'oldVal')
   
     if (newVal) {
    // console.log('aaa');
    this.value = newVal;
    this.showPie();
     } else {
        this.value = oldVal;
      this.showPie();
     }
   },
   deep: true //对象内部属性的监听，关键。
  }
 }
}
</script>

<style lang="less">
.charts{
  //
}
</style>
